<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position.html</title>
<style>
#absol{
	width:800px;
	height:600px;
	border:1px solid #aaaaaa;
	position:relative; 
}

#rela{
	width:800px;
	height:600px;
	border:1px solid #aaaaaa;
	position:relative; 
}
#blk{
	width:800px;
	height:600px;
	border:1px solid #aaaaaa;
	position:relative; 
}


#pa, #mo, #ch{
	width:100px;height:100px;
	border:1px solid #ff0000;
	position:absolute;
}
#pa{
	left:10px;top:10px;
}
#mo{
	left:120px;	top:10px;
}
#ch{
	left:230px; top:10px;
}
#pa2, #mo2, #ch2{
	width:100px;height:100px;
	border:1px solid #ff0000;
	position:relative;
}
#pa2{ left:10px; top:10px }
#mo2{ left:120px; top:10px }
#ch2{ left:230px; top:10px }


#pa3, #mo3, #ch3{
	width:100px;height:100px;
	border:1px solid #ff0000;
	display:inline-block;
}

</style>
</head>
<body>
<h1>absolute</h1>
<div id='absol'>
	<div id='pa'>아빠</div>
	<div id='mo'>엄마</div>
	<div id='ch'>아들</div>
</div>
<h1>relative</h1>
<div id='rela'>
	<div id='pa2'>아빠</div>
	<div id='mo2'>엄마</div>
	<div id='ch2'>아들</div>
</div>

<h1>display:block</h1>
<div id='blk'>
	<div id='pa3'>아빠</div>
	<div id='mo3'>엄마</div>
	<div id='ch3'>아들</div>
</div>
</body>
</html>